<template>
    <div class="iframe">
        <div class="i-title">
            <h3>变量侦听</h3>
        </div>
        <div class="i-tip">姓名:
            <el-input type="text" v-model="name" />
        </div>
        <div class="i-tip">年龄:
            <el-input type="text" v-model="age" />
        </div>
        <div class="i-tip">分数:
            <el-input type="text" v-model="obj.user[0].score" />
        </div>
        <div class="i-tip">{{ name }}</div>
    </div>
</template>

<script setup>
import { ref, watch, reactive, watchEffect } from "vue";

// 定义变量
let name = ref("张三");
let age = ref(18);
let obj = reactive({
    user: [{
        name:"李明明",
        score: 60
    }]
});

// 单独监听
watch(name, (cur, pre) => {
    console.log(cur, pre, "单个cur,pre")
})

// 监听多个变量
watch([name, age], (cur, pre) => {
    console.log(cur, pre, "多个cur,pre")
})

// 监听对象值
watch(() => obj.user[0].score, (cur, pre) => {
    console.log(cur, pre, "单个对象cur,pre")
})

let _num = 0;
// 观察变量变化的效果
watchEffect(() => {
    console.log(name.value);
    _num++;
    console.log("一共更新" + _num + "次")
})

// 区别在于首次进入时 watchEffect 回调将会触发，而 watch 不会。

</script>
